<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>影院详情</title>
    <link rel="stylesheet" href="./css/common.d1d257d3.css">
    <link rel="stylesheet" href="./css/cinemas-cinema.b26baff1.css">
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
    <script src="./js/vue2.6.12.js"></script>
    <script src="./js/axios.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script type="text/javascript" src="./js/qs.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <script type="text/javascript" src="./js/dateutil.js"></script>

</head>
<body>

<div id="app">
    <div class="header">
        <div class="header-inner">
            <a href="index.html" class="logo" data-act="icon-click"></a>
            <div class="city-container" >
                <div class="city-selected">
                    <div class="city-name">
                        &nbsp;
                        <!--                        <span class="caret"></span>-->
                    </div>
                </div>
                <div class="city-list" >
                    <div class="city-list-header">定位城市：<a class="js-geo-city">上海</a></div>
                </div>
            </div>


            <div class="nav">
                <ul class="navbar">
                    <li><a href="index.html" >首页</a></li>
                    <li><a href="movie.html" >电影</a></li>
                    <li><a href="cinema.html">影院</a></li>
                    <li><a href="dashboard_websocket.html">榜单</a></li>
                </ul>
            </div>

            <div class="user-info" v-if="islogin">
                <div class="user-avatar has-login">
                    <img src="./images/63957f10ae9679c95d4ba26ad1bd29c816882.png">
                    <span class="caret"></span>
                    <ul class="user-menu yes-login-menu">
                        <li class="text"><a href="./orderlist.html">我的订单</a></li>
                        <li class="text login-name"><a href="javascript:void(0)" >基本信息</a></li>
                        <li class="text"><a href="javascript:void(0)" class="J-logout" @click="logout">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <div class="user-info" v-if="!islogin">
                <div class="user-avatar J-login">
                    <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png">
                    <span class="caret"></span>
                    <ul class="user-menu no-login-menu">
                        <li><a href="javascript:void(0)" @click="login">登录</a></li>
                    </ul>
                </div>
            </div>

            <form target="_blank" class="search-form" >
                <input name="kw" class="search" type="search" v-model="searchKey" maxlength="32" placeholder="找影视剧、影人、影院"
                       autocomplete="off">
                <input class="submit" type="button"  @click="doSearch"/>
            </form>

        </div>
    </div>
    <div class="header-placeholder"></div>
    <div class="banner cinema-banner">
        <div class="wrapper clearfix">
            <div class="cinema-left">
                <div class="avatar-shadow">
                    <img class="avatar" :src="imagePath+cinemaImg">
                </div>
            </div>

            <div class="cinema-main clearfix">
                <div class="cinema-brief-container">
                    <h1 class="name text-ellipsis" style="color: white">{{cinemaName}}</h1>
                    <div class="address text-ellipsis">{{cinemaLocation}}</div>
                    <div class="telphone">电话：{{cinemaPhone}}</div>

                    <div class="features-group">
                        <div class="group-title">影院服务</div>

                        <div class="feature">
                            <span class="tag ">改签</span>
                            <p class="desc text-ellipsis" title="未取票用户放映前60分钟可改签">未取票用户放映前60分钟可改签</p>
                        </div>
                        <div class="feature">
                            <span class="tag ">儿童优惠</span>
                            <p class="desc text-ellipsis"
                               title="1.3米以下儿童可免费无座观影（VIP厅、IMAX厅、4DX厅除外），一名成人限带一名儿童（仅限1.3米以下，观看3D均有3D眼镜）。">
                                1.3米以下儿童可免费无座观影（VIP厅、IMAX厅、4DX厅除外），一名成人限带一名儿童（仅限1.3米以下，观看3D均有3D眼镜）。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="crumbs-nav-container">
            <span>{{cinemaName}}</span>
        </div>
        <div class="movie-list-container">
            <div class="movie-list">
                <div class="movie" v-for="movie in movieList" :key="movie.movieId" style="cursor: pointer;">
                    <img :src="movieImagePath+movie.movieImg" @click="queryHallMovieByMovieId(movie.movieId)"/>
                </div>
                <span class="pointer"></span>
            </div>

        </div>

        <div class="show-list active">
            <div class="movie-info">
                <div>
                    <h2 class="movie-name">{{selectedMovieName}}</h2>

                    <span class="score sc">{{selectedMovieScore}}</span>

                </div>

<!--                <div class="movie-desc">-->
<!--                    <div>-->
<!--                        <span class="key">时长 :</span>-->
<!--                        <span class="value">{{selectedMovietime}}分钟</span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <span class="key">类型 :</span>-->
<!--                        <span class="value">-->
<!--                          <a class="text-link" href="javascript:voie(0)" > 奇幻 </a>-->
<!--                      </span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <span class="key">主演 :</span>-->
<!--                        <span> 赵又廷</span>-->
<!--                        <span>邓伦</span>-->
<!--                        <span>王子文</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

            <div class="show-date">
                <span>观影时间 :</span>
                    <span :class="todayActive?'date-item active':'date-item'">
                        <a href="javascript:void(0)"
                             @click="changePlayDate(today,true)"
                             style="text-decoration: none">{{today}}</a>
                    </span>
                    <span :class="todayActive?'date-item':'date-item active'">
                        <a href="javascript:void(0)"
                         @click="changePlayDate(tomorrow,false)"
                         style="text-decoration: none">{{tomorrow}}</a>
                    </span>
            </div>

            <div class="plist-container active">
                <table class="plist">
                    <thead>
                    <tr>
                        <th>放映时间</th>
                        <th>语言版本</th>
                        <th>放映厅</th>
                        <th>售价（元）</th>
                        <th>选座购票</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="hallmovie in hallMovieList" :key="hallmovie.hallMovieId">
                        <td>
                            <span class="begin-time">{{hallmovie.startTime}}</span>
                            <br>
                            <span class="end-time">{{hallmovie.endTime}}散场</span>
                        </td>
                        <td>
                            <span class="lang">{{hallmovie.movie.movieVersion}}</span>
                        </td>
                        <td>
                            <span class="hall">{{hallmovie.hallType.htName}}</span>
                        </td>
                        <td>
                            <span class="sell-price"><span class="stonefont">{{hallmovie.fareMoney}}</span></span>
                        </td>
                        <td>
                            <a href="javascript:void(0)" @click="chooseSeat(hallmovie.hallId,hallmovie.hallMovieId,hallmovie.movieId,hallmovie.cinemaId)"
                               class="buy-btn normal">选座购票</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>

    </div>

</body>
<script>
    let vm = new Vue({
        el: "#app",//绑定，告知vue负责管理页面的哪个部分
        data: {
            islogin:false,//是否已经登录
            movieId: -1,//电影id
            cinemaId: -1,//影院id
            cinemaName: '万达影城(松江店)',//当前影院名称
            cinemaPhone: '021-64212212',
            cinemaLocation: '一二八纪念路968号万达广场F5层501、F6层',
            cinemaImg: '13b0d4df834b78cda6f39bb88ba87fa4.jpg',
            hallTypeList:[],
            hallTypeId2NameMap:new Map(),
            //电影院对应的影厅列表
            hallList:[],
            //影厅id和影厅类型id的hashmap
            hallId2HallTypeIdMap:new Map(),
            //本影院即将播放的电影列表
            movieList: [
                {"searchValue":null,"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"params":{},"movieId":166,"movieName":"天气之子","movieReleaseTime":"2019-10-31","movieArea":1,"movieVersion":"国语2D","movieInfo":"在高一的夏天，少年帆高（醍醐虎汰朗 配音）离家出走，一个人来到东京。帆高好不容易找到一份工作，为一本古怪的“神秘学杂志”写稿，生活孤单贫苦。连日的滂沱大雨，像是来映衬他的失落。在纷纭杂沓的大都会一角，帆高遇上了一个可爱少女阳菜（森七菜 配音）。阳菜和弟弟相依为命，个性坚强、开朗，但她心中隐藏着一个重大秘密──每当她说：“现在开始天晴了！”雨便渐渐停下来，美丽的阳光洒落街上。原来，她拥有一股不可思议的能量，一股能让天空放晴的异力……","movieImg":"ecca4f0b95340b2c57006a1bace4c3f91386100.jpg@464w_644h_1e_1c.jpg","movieEname":" 天気の子","movieScore":9,"movieStatus":1,"movieCount":1120,"movieBoxOffice":1266,"movieTime":113,"movieWantCount":5671054,"movieReleaseYear":2019,"commentUserCount":12},
                {"searchValue":null,"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"params":{},"movieId":166,"movieName":"天气之子","movieReleaseTime":"2019-10-31","movieArea":1,"movieVersion":"国语2D","movieInfo":"在高一的夏天，少年帆高（醍醐虎汰朗 配音）离家出走，一个人来到东京。帆高好不容易找到一份工作，为一本古怪的“神秘学杂志”写稿，生活孤单贫苦。连日的滂沱大雨，像是来映衬他的失落。在纷纭杂沓的大都会一角，帆高遇上了一个可爱少女阳菜（森七菜 配音）。阳菜和弟弟相依为命，个性坚强、开朗，但她心中隐藏着一个重大秘密──每当她说：“现在开始天晴了！”雨便渐渐停下来，美丽的阳光洒落街上。原来，她拥有一股不可思议的能量，一股能让天空放晴的异力……","movieImg":"ecca4f0b95340b2c57006a1bace4c3f91386100.jpg@464w_644h_1e_1c.jpg","movieEname":" 天気の子","movieScore":9,"movieStatus":1,"movieCount":1120,"movieBoxOffice":1266,"movieTime":113,"movieWantCount":5671054,"movieReleaseYear":2019,"commentUserCount":12}
            ],
            //近期排片计划列表
            hallMovieList: [
                {"hallMovieId":1,"htName":"IMAX厅","movieId":166,"hallId":1,"startTime":"2021-03-01 15:10","endTime":"2021-03-01 17:10","fareMoney":40,"movieVersion":"3D"},
                {"hallMovieId":1,"htName":"IMAX厅","movieId":166,"hallId":1,"startTime":"2021-03-01 17:10","endTime":"2021-03-01 19:10","fareMoney":40,"movieVersion":"3D"},
                {"hallMovieId":1,"htName":"IMAX厅","movieId":166,"hallId":1,"startTime":"2021-03-01 19:10","endTime":"2021-03-01 21:10","fareMoney":40,"movieVersion":"3D"}
            ],
            selectedMovieId: -1,//被选中的movie id
            selectedMovieName: '聪明的一休',//被选中的电影名称
            selectedMovieScore: 1,//被选中的电影评分
            selectedMovietime: 123,//被选中电影时长（分钟）
            today: '2021-03-01',
            tomorrow: '2021-03-02',
            selectedQueryDate: '2021-03-01',//选择查询哪一天的播放列表
            todayActive: true,//是否选择今天作为观影日期
            imagePath: './images/',//电影院的图片路径前缀
            movieImagePath:'./images/',//每部影片的图片路径前缀
            searchKey:'',
            movieIdList:[],
            allHallMovieList:[]
        },
        methods: {
            //搜索
            /**
             * url:search.html
             * method:get
             * param: searchKey
             * url使用encodeURI编码,例如：encodeURI("search.html?searchKey=万达")
             */
            doSearch() {
                location.href=encodeURI("search.html?searchKey="+this.searchKey)
            },

            /**
             * 使用substr函数截取
             * 截取日期时间的 小时，分 两个部分
             * 如果输入2020-11-20 13:21:01,那么截取后返回13:21
             * 例如：timestr.substr(11, 5)
             */
            substrHourAndMinute(timestr) {
                return timestr.substr(11, 5)
            },
            //根据id查询当前电影院信息
            /**
             * url:cinema/cinema/cinema/queryCinemaById
             * param: this.cinemaId,
             * return:
             *   在响应函数中
             *      把服务端返回的电影名称赋值给：this.cinemaName = res.data.cinemaName
             *      把服务端返回的电影院的电话赋值给：this.cinemaPhone = res.data.cinemaPhone
             *      把服务端返回的电影院的地址赋值给：this.cinemaLocation = res.data.cinemaLocation
             *      把服务端返回的电影院的图片赋值给：this.cinemaImg = res.data.cinemaImg
             */
            queryCinemaById() {
                axios({
                    url:'cinema/cinema/cinema/web/queryById',
                    method:'get',
                    params:{
                        cinemaId:this.cinemaId
                    }
                }).then(res=>{
                    this.cinemaName = res.data.cinemaName
                    this.cinemaPhone = res.data.cinemaPhone
                    this.cinemaLocation = res.data.cinemaLocation
                    this.cinemaImg = res.data.cinemaImg
                })
            },
            //如果用户在页面上选择其他的放映日期，根据新的观看日期查询排片列表
            /**
             *  把是否选择今天作为观影日期赋值给：this.todayActive = flag
             *  把选择的观影日期赋值给：this.selectedQueryDate = sdate
             *  调用 this.loadHallMovieList()，根据选择的movieId查询排片计划列表
             */
            changePlayDate(sdate, flag) {
                this.selectedQueryDate = sdate
                this.todayActive = flag
                this.queryHallMovieByMovieId(this.selectedMovieId)

            },
            //1.根据传入的movie_id 设置this.selectedMovieId
            //2.调用loadHallMovieList方法把movieId,当前选择的播放日期，影院id传入后端，获取播放计划列表
            queryHallMovieByMovieId(movie_id) {
                this.selectedMovieId=movie_id;
                this.hallMovieList=[]
                let currenttime = new Date().pattern("yyyy-MM-dd HH:mm");

                // this.selectedQueryDate
                this.allHallMovieList.forEach(m=>{
                    // console.log('22=======',m.movie)
                    if( m.movie.movieId==movie_id
                        && m.startTime.startsWith(this.selectedQueryDate)
                        && m.startTime > currenttime){
                        this.hallMovieList.push(m);
                    }
                })
            },
            //根据电影院id查询这个电影院的即将播放的电影列表，这个方法使用后台的分页方法，但是把所有记录放在第一页查询出来
            /**
             * url:cinema/cinema/movie/listComingMovieListByCinema
             * method:get
             * param:cinemaId ：this.cinemaId
             * param:pageNum=1 第1页
             * param:pageSize=100 每页100条
             * return: 电影列表
             *   在响应函数中
             *     --if (this.movieId > 0) 这个说明是从电影详情页面-->点击 “特惠购票”按钮跳转到当前这个页面,那么是带有movieId的，
             *       所以把用户选定的这个电影放在数组的第1个位置，显示在最前面
             *       --清空this.movieList
             *       --for循环返回的电影列表
             *         --如果列表中对象的movieId等于this.movieId（从电影详情页面传过来的，保存在this.movieId中）,调用this.movieList.unshift(m)向列表头部添加对象
             *         --否则，调用this.movieList.push(m)向列表尾部添加对象
             *     --否则 调用 this.movieList = res.data 直接把返回的列表赋值给定义好的变量
             *     --如果this.movieList.length > 0，说明服务端返回了电影列表，
             *       那么，调用this.queryHallMovieByMovieId(this.movieList[0].movieId)查询列表中第一个电影的排片计划列表
             */
             queryMovieListByCinema() {

            },
            //点击选座购票按钮后，跳转到选座页面
            /**
             *
             * param: hallId 影厅id
             * param: hallMovieId  排片计划记录的id
             * param: movieId 电影id
             * 前端跳转到chooseseat.html，并且带着上面三个参数（参数名与上面列出的一样）
             * 例如：location.href = "chooseseat.html?hallId=" + hallId + "&hallMovieId=" + hallMovieId + "&movieId=" + movieId
             */
            chooseSeat(hallId, hallMovieId,movieId,cinemaId) {
                location.href = "chooseseat.html?hallId=" + hallId + "&hallMovieId=" + hallMovieId + "&movieId=" + movieId+"&cinemaId="+cinemaId
            },
            //退出登录，跳转到主页
            logout(){
                removeToken()
                localStorage.removeItem("user_cellphone")
                location.href="index.html"
            },
            //跳转到登录页面
            login(){
                location.href='login.html'
            },
            //检查是否登录
            checkIsLogin(){
                if(getToken()){
                    this.islogin=true;
                }
            },


             // 根据电影id，电影院id，被选中的查询日期获取排片计划表
            loadHallMovieList(){
                axios({
                    url:'cinema/cinema/hallmovie/web/queryHallMovieByCinemaId',
                    method:'get',
                    params:{
                        cinemaId:this.cinemaId
                    }
                }).then(res=>{
                    this.movieList=[]
                    this.hallMovieList=[]

                    this.allHallMovieList=res.data
                    // this.hallMovieList=res.data
                    res.data.forEach(h=>{
                        if(-1==this.movieIdList.indexOf(h.movie.movieId)){
                            this.movieIdList.push(h.movie.movieId)
                            this.movieList.push(h.movie)
                        }
                    })
                    this.selectedMovieName=this.movieList[0].movieName;
                    this.selectedMovieScore=this.movieList[0].movieScore;
                    this.selectedMovieId=this.movieList[0].movieId;
                    let currenttime = new Date().pattern("yyyy-MM-dd HH:mm");

                    this.allHallMovieList.forEach(m=>{
                        // console.log('22=======',m.movie)
                       if( m.movie.movieId==this.movieList[0].movieId
                           && m.startTime.startsWith(this.selectedQueryDate)
                           && m.startTime > currenttime){
                           this.hallMovieList.push(m);
                       }
                    })

                })
            }
        },

        /**
         * 1.从url中获取参数cinemaId，并赋值this.cinemaId = GetQueryString('cinemaId')
         * 2.从url中获取参数movieId，并赋值this.movieId = GetQueryString('movieId')
         *   如果url中没有传movieId参数，那么给movieId赋默认值-1
         *   if (!this.movieId) {
                this.movieId = -1
            }
         * 3.调用this.queryMovieListByCinema(this.cinemaId)根据传过来的影院id查询即将播放的电影列表
         * 4.调用this.queryCinemaById()，查询电影院的信息
         * 5.获取当前日期：let curdate = new Date()
         * 6.把当前日期格式化一下this.today = curdate.pattern("yyyy-MM-dd")并赋值给today变量
         * 7.页面刚刚加载出来，默认的选中日期就是今天：this.selectedQueryDate = curdate.pattern("yyyy-MM-dd")
         * 8.根据当前日期，计算明天的日期，并格式化this.tomorrow = new Date(((new Date()).getTime() + 24 * 60 * 60 * 1000)).pattern("yyyy-MM-dd")
         */
        created() {
            this.cinemaId = GetQueryString('cinemaId');
            this.queryCinemaById();
            this.loadHallMovieList();
            let curdate = new Date();
            this.today = curdate.pattern("yyyy-MM-dd")
            this.selectedQueryDate = curdate.pattern("yyyy-MM-dd")
            this.tomorrow = new Date(((new Date()).getTime() + 24 * 60 * 60 * 1000)).pattern("yyyy-MM-dd")
        },

    })
</script>
</html>
